<template>
  <el-container>
    <el-header>
      <h2>水电管理</h2>
    </el-header>
    <el-main style="padding-left: 0">
      <el-card>
        <div slot="header" class="clearfix">
          <el-row style="height: 40px;">
            <el-col :span="9">
              <el-form :inline="true" :model="queryCompany">
                <el-form-item>
                  <el-input v-model="queryCompany.condition.name" placeholder="输入企业名称查找" style="width: 175px"/>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="pageCompany()">查询</el-button>
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="15">
                  <span style="float: right;">
<!--                    缴费按钮-->
                     <pay-card :pay="Name" style="padding-right: 10px"/>
                     <el-button plain type="success" @click="send">账单查询</el-button>
                  </span>
            </el-col>
          </el-row>
        </div>
        <div class="text item">
          <el-table ref="multipleTable" :data="companyData"
                    @row-click="queryHydropowerBill"
          >
            <el-table-column label="企业名称" prop="name"></el-table-column>
            <el-table-column label="企业地址" prop="address"></el-table-column>
          </el-table>
          <el-pagination
              :current-page.sync="queryCompany.page"
              :page-size.sync="queryCompany.size"
              :total="total"
              background
              layout="prev, pager, next,jumper"
              @current-change="pageCompany"
              style="margin-top: 20px"
          >
          </el-pagination>
        </div>
      </el-card>
      <br>
      <el-row :gutter="20">
        <el-col :span="12">
          <hydropower-query/>
        </el-col>
        <el-col :span="12">
          <Querybill/>
        </el-col>
      </el-row>
      <br>
      <balance/>

    </el-main>
    <!--  添加账单弹窗-->
    <el-dialog
        :visible.sync="visible.addVisible"
        :title="Name.name" width="30%">
      <el-form label-width="100px">
        <el-form-item label="备注">
          <el-input v-model="add.remark"/>
        </el-form-item>
        <el-form-item label="缴费类型">
          <el-select v-model="add.type" style="width: 100%">
            <el-option value="水费"></el-option>
            <el-option value="电费"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="月份">
          <el-date-picker
              v-model="add.month"
              placeholder="选择月"
              style="width: 100%"
              type="month"
              value-format="yyyy-MM">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="用量">
          <el-input v-model="add.amount"/>
        </el-form-item>
        <el-form-item label="单价">
          <el-input v-model="add.unitPrice"/>
        </el-form-item>
        <el-form-item style="text-align: right">
          <el-button type="primary" @click="addBill(); send(); ">添加</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </el-container>
</template>

<script>
import Querybill from "./querybill";
import {Unicom} from "../../../../common/utils";
import Balance from "./balance";
import PayCard from "../addPay/payCard";
import HydropowerQuery from "../addPay/hydropowerQuery";
import {QueryCompany} from "../../../../network/companyApi";
import {AddBill} from "../../../../network/hydropowerApi";

export default {
  name: "bill",
  components: {HydropowerQuery, PayCard, Balance, Querybill},
  data() {
    return {
      visible: {
        addVisible: false,
      },
      companyData: null,
      queryCompany: {
        page: 1,
        size: 5,
        condition: {
          name: "",
          address: null,
          type: null,
          certificationType: null,
        },
      },
      add: {
        companyUuid: null,
        type: null,
        month: null,
        amount: null,
        unitPrice: null,
        remark: null,
        priceConstruction: null
      },
      total: null,
      Name: {
        name: null,
        uuid: null
      },
    }
  },
  mounted() {
    this.pageCompany();
  },
  methods: {
    queryHydropowerBill(row) {
      Unicom.$emit('queryHydropowerBillUuid', row)
    },

    //缴纳账单按钮
    showPay() {
      if (!this.Name.uuid) {
        this.$message({
          message: "请勾选需添加账单的公司",
          type: "error"
        })
      } else {
        this.visible.addVisible = true
      }
    },

    //添加账单
    addBill() {
      AddBill(this.add).then(res => {
        console.log(res);
      })
    },
    //查询公司
    pageCompany() {
      QueryCompany(this.queryCompany).then(res => {
        // console.log(res);
        this.companyData = res.data.records;
        this.total = res.data.total;
      });
    },
    //获取选中uuid
    change(val) {
      this.add.companyUuid = val[0] ? val[0].uuid : undefined;
      this.Name.name = val[0] ? val[0].name : undefined;
      this.Name.uuid = val[0] ? val[0].uuid : undefined;
    },
    send() {
      Unicom.$emit('data2', this.Name);
      this.visible.addVisible = false
    }
  },
}
</script>

<style scoped>
.text {
  font-size: 14px;
}
.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix {
  height: 40px;
}

.clearfix:after {
  clear: both
}
</style>